<template>
  <el-row>
    <el-col :span="6"></el-col>
    <el-col :span="12">
      <el-alert
        v-if="showAlert"
        :title="alertInfo.content"
        :type="alertInfo.type"
        closable
        @close="showAlert = false">
        
      </el-alert>
    </el-col>
  </el-row>

  <h1></h1>
  
  <el-row>
    <el-col :span="1"></el-col>
    <el-col :span="12">
    
      <el-table :data="tableDataL1" style="width: 100%">
        <template v-for="(attrHeader, index) in attrHeaders">
          <el-table-column
            :key="index"
            :label="attrHeader.label"
            :prop="attrHeader.name"
            v-if="!('hidden' in attrHeader)"
            align="center"
          ></el-table-column>
        </template>
        <el-table-column  label="" align="center">
          <template #default="{$index}">
            <el-button link type="primary"  @click="selectName($index)">选择</el-button>
            <el-button link type="primary"  @click="deleteName($index)">清空</el-button>
          </template>
        </el-table-column>
      </el-table>

    <!-- 设置部分 -->
    </el-col>
    <el-col :span="1"></el-col>
    <el-col :span="8">
      <el-card v-loading="fwUploadLoading">
        <template #header>
          <div class="card-header">
          <span>{{paraSetName}}</span>
          </div>
        </template>
      
        <!-- 设置部分 -->
        <el-form :model="formData" ref="formRef" label-width="auto">
          <el-form-item
            v-for="(attribute, index) in attributes"
            :key="index"
            :label="attribute.label"
            :prop="attribute.name"
          >
            <el-select
              v-if="attribute.type === 'enum'"
              v-model="formData[attribute.name]"
              placeholder="请选择"
            >
              <el-option
                v-for="option in attribute.options"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
            <el-input
              v-else
              v-model="formData[attribute.name]"
              @input="handleInput"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :disabled="enableButton" v-loading="paraSetLoading" type="primary" @click="parameterSet">修改</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
  
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage, MEssage } from 'element-plus';
import axios from 'axios';
import {useRoute} from 'vue-router';

const route = useRoute()

const attributes = ref([]);
const formData = ref({});
const formRef = ref(null);
const showAlert = ref(false)
const alertInfo = ref({
  "type": "error",
  "content": "成功"
})
const paraSetLoading = ref(false)
const tableDataL1 = ref([])
const attrHeaders = ref([])
const paraSetLabel = ref("请选择要修改的参数")
const paraSetName = ref("")
const enableButton = ref(true)



onMounted(async () => {
  refreshConfig()
});


async function refreshConfig() {
  try {
    console.log("/restful" + route.path)
    const response = await axios.get(window.location.origin + "/restful" + route.path);
    
    tableDataL1.value = response.data.content.data;
    attrHeaders.value = response.data.content.list
    console.log(tableDataL1.value)
    console.log(attrHeaders.value)

    // yhl: ref的循环必须用这种方式
    // attributes.value.forEach(attr => {
    //   formData.value[attr.name] = attr.value;
    // });
  } catch (error) {
    console.error('API call failed:', error);
  }
}

// 选择一级参数
async function selectName(index){
  console.log(index)
  console.log(tableDataL1.value)

  const selectedName = tableDataL1.value[index].name
  const selectedLabel = tableDataL1.value[index].label
  paraSetLabel.value = selectedLabel
  paraSetName.value = selectedName

  try {
    const response = await axios.get("/restful" + route.path + "/" + selectedName);
    attributes.value = response.data.content.data;
    console.log(attributes.value)

    // yhl: ref的循环必须用这种方式
    attributes.value.forEach(attr => {
      formData.value[attr.name] = "";
      formData.value[attr.name] = attr.value;
    });

    enableButton.value = false

  } catch (error) {
    console.error('接口错误:', error);
  }
  
}

// 选择一级参数
async function deleteName(index){
  const selectedName = tableDataL1.value[index].name
  const selectedLabel = tableDataL1.value[index].label

  try {
    const delRequest = {}
    delRequest["name"] = selectedName
    delRequest["label"] = selectedLabel
    delRequest["method"] = "delete"
    const response = await axios.post("/restful" + route.path + "/" + selectedName, delRequest);
    
    if(response.data.errCode == 0)
    {
      ElMessage.success("清除成功")
      refreshConfig()
    }
    else
    {
      ElMessage.error(response.data.errInfo)
    }

    

  } catch (error) {
    console.error('接口错误:', error);
  }
  
}

const parameterSet = async () => {
    try {
      paraSetLoading.value = true
      const response = await axios.post("/restful" + route.path + "/" + paraSetName.value, formData.value);
      // console.log(this.$route.fullPath);
      paraSetLoading.value = false
      let responseData = response.data
      showAlert.value = true
      if(responseData.errCode >= 0)
      {
        alertInfo.value.type = "success"
        refreshConfig();
      }
      else
      {
        alertInfo.value.type = "error"
      }
      alertInfo.value.content = responseData.errInfo
        
    } catch (error) {
    console.error('API call failed:', error);
    paraSetLoading.value = false
  }
};

const handleInput = async () => {
  
  showAlert.value = false
};

</script>

<style scoped>
/* 添加你自己的样式 */
</style>


